import request from '../../utils/request'
import cookie from '../../utils/cookie'
Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 导航标签数据
    videoGroupList: [],
    // 导航标签的 id 标识
    navId: '',
    // 视频列表数据
    videoList: [],
    // video 标识
    videoId: '',
    // 记录实时播放的时长(数组里面存储对象,对象里面存储视频的 vid 和播放时长)
    videoUpdateTime: [],
    // 标识下拉刷新是否被触发
    isTriggered: false
  },
  // 视频播放结束事件
  handleEnded(event){
    // 将当前视频的播放记录从 videoUpdateTime 中移除
    const {videoUpdateTime} = this.data
    videoUpdateTime.splice(videoUpdateTime.findIndex(item => item.vid === event.currentTarget.id),1)
    this.setData({
      videoUpdateTime
    })
  },
  // 下拉刷新的回调
  handleRefresh(){
    // console.log('下拉了')
    this.getVideoList(this.data.navId)
  },
  // 上拉触底的回调 
  handleToLower(){
    // console.log('上拉触底')

    // 调用后端接口获取到的最新数据(假数据)
    const newVideoList = []

    // 追加到数据中
    const {videoList} = this.data
    videoList.push(...newVideoList)
    this.setData({
      videoList
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.getVideoGroupList()
  },
  // 获取导航标签数据
  async getVideoGroupList(){
    const result = await request('/video/group/list')
    this.setData({
      videoGroupList: result.data.slice(0,14),
      navId: result.data[0].id
    })
    this.getVideoList(this.data.navId)
  },
  // 点击导航切换的回调
  changeNav(event){
    // 会自动将 number 转换为 string
    // const navId = event.currentTarget.id
    // 不会进行转换,仍然是原始类型
    const navId = event.currentTarget.dataset.id

    this.setData({
      navId: Number(navId),
      videoList: []
    })
    // 显示正在加载
    wx.showLoading({
      title: '正在加载'
    })
    this.getVideoList(this.data.navId)
  },
  // 获取视频列表数据
  async getVideoList(navId){
    cookie()
    const videoListData = await request('/video/group',{id: navId})
    if(!videoListData.datas){
      return
    }
    let index = 0
    const videoList = videoListData.datas.map(item => {
      item.id = index++
      return item
    })
    // 隐藏 loading 提示框
    wx.hideLoading()
    this.setData({
      videoList,
      isTriggered: false
    })
  },
  /**
   * 点击播放/继续播放的回调
   *  需求:
   *    当播放新的视频的时候关掉之前播放的视频
   *  思路:
   *    (1)关闭视频的方法: wx.createVideoContext(string id, Object this)
   *    (2)找到上一个视频的实例对象,调用关闭方法
   *  设计模式:
   *    (1)需要创建多个对象的情况下,使用一个变量来保存,始终只有一个对象
   *    (2)当创建新的对象的时候就会把之前的对象覆盖掉
   *    (3)节省内存空间
   */
  handlePlay(event){
    const vid = event.currentTarget.id
    
    // 解决多个视频同时播放的问题
    // this.videoContext && this.vid !== vid  && this.videoContext.stop()
    // this.vid = vid

    // 创建视频的上下文对象
    this.videoContext =  wx.createVideoContext(vid)
    // 判断当前是否有视频播放记录
    const {videoUpdateTime} = this.data
    const videoItem = videoUpdateTime.find(item => item.vid === vid)
    if(videoItem){
      // 跳转至指定的位置播放
      this.videoContext.seek(videoItem.currentTime)
    }
    // 播放当前视频
    this.videoContext.play()
    
    // 将当前点击的 vid 更新至 data 中的 videoId
    this.setData({
      videoId: vid
    })
  },
  // 视频播放进度实时变化的回调
  handleTimeUpdate(event){
    // 整理数据
    const videoTimeObj = {vid: event.currentTarget.id , currentTime: event.detail.currentTime }
    const {videoUpdateTime} = this.data
    // 如果对象已经存在,则更新播放时长,如果不存在,则新增对象
    const videoItem = videoUpdateTime.find(item => item.vid === event.currentTarget.id)
    if(videoItem){
      videoItem.currentTime = event.detail.currentTime
    }else{
      videoUpdateTime.push(videoTimeObj)
    }
    this.setData({
      videoUpdateTime
    })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
    // 需要在配置文件中配置 enablePullDownRefresh 属性
    // https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html
    console.log('页面的下拉刷新')
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
    // 需要在页面上有滚动条的情况下才会触发
    console.log('页面的上拉触底')
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage({from}) {
    console.log(from)
    if(from === 'button'){
      return{
        title: '来自button的转发',
        page: '/pages/video/video',
        imageUrl: '/static/images/nvsheng.jpg'
      }
    }else{
      return{
        title: '来自menu的转发',
        page: '/pages/video/video',
        imageUrl: '/static/images/nvsheng.jpg'
      }
    }
  }
})